<template>
  <div class="lock-container">
    <div class="lock-form animated bounceInDown">
      <div class="animated" :class="{ shake: passwdError, bounceOut: pass }">
        <div class="userinfo-box">
          <a-avatar class="avatar" :size="70" shape="circle" :src="avatar"/>
          <span class="username">{{nickname}}</span>
        </div>
        <a-input-password
            style="width: 300px"
            placeholder="请输入锁屏密码或当前登录账号的密码"
            type="password"
            class="input-with-select animated"
            v-model="passwd"
            @keyup.enter.native="handleLogin"
            :allowClear="true"
        >
        </a-input-password>
        <div class="flex ant-row-flex-space-between margin-top-sm">
          <a-button
              @click="handleLogin"
              type="link"
              style="color: #1890ff"
          >进入系统
          </a-button>
          <a-button
              type="link"
              @click="handleLogout"
              style="color: #1890ff"
          >返回登录
          </a-button>
        </div>
      </div>
    </div>
    <div class="date-content">
      <div class="time">
        <span>{{time}} </span>
        <span class="timeText">{{timeText}} </span>
      </div>
      <div class="date">
        <span>{{date}}</span>
        <span class="margin-left-sm">{{weekText}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters, mapState, mapActions} from "vuex";

  export default {
    name: "lock",
    data() {
      return {
        passwd: "",
        passwdError: false,
        pass: false,
        date: '',
        timer: null,
        time: '',
        timeText: '',  //时间段
        weekText: '',  //星期
      };
    },
    created() {
      // const cachedTabsStr = sessionStorage.getItem(process.env.VUE_APP_TBAS_KEY);
      this.timer = setInterval(this.getTime, 1000)
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer)
    },
    mounted() {
      // this.getTime()
    },
    computed: {
      ...mapGetters(["nickname", "avatar"]),
    },
    props: [],
    methods: {
      ...mapActions(["ClearLock", "Logout"]),
      handleLogout() {
        let that = this
        this.$confirm({
          title: "提示",
          content: "是否确定返回登录界面?",
          okText: "确认",
          cancelText: "取消",
          closable: true,
          icon: () => that.$createElement('a-icon', {
            props: {
              key: 'warning',
              type: 'exclamation-circle',
              twoToneColor: '#faad14'
            }
          }),
          onOk: () => {
            return this.Logout({})
              .then(() => {
                localStorage.removeItem('lockPasswd')
                localStorage.removeItem('isLock')
                setTimeout(() => {
                  window.location.reload();
                }, 16);
                // this.$router.push({path: "/user/login"});
              })
              .catch((err) => {
                this.$message.error({
                  title: "错误",
                  description: err.message,
                });
              });
          },
          onCancel() {
          },
        });
      },
      handleLogin() {
        // const cachedTabsStr = sessionStorage.getItem(
        //   process.env.VUE_APP_TBAS_KEY
        // );
        let lockPasswd = localStorage.getItem('lockPasswd')
        let loginPasswd = localStorage.getItem('loginPasswd')
        let nowPassWord = this.$md5(this.passwd)
        //密码必须与锁屏密码或登录密码相同
        if (!this.passwd) {
          this.$message.warning("请输入密码！");
          return
        }
        if (nowPassWord == lockPasswd || nowPassWord == loginPasswd) {
          //解除锁屏状态
          localStorage.removeItem('isLock')
          this.$message.success("解锁成功！");
          setTimeout(() => {
            this.$router.push({path: "/system/portal/index"});
          }, 100);
        } else {
          this.$message.error("解锁密码错误,请重新输入");
          this.passwdError = true;
          setTimeout(() => {
            this.passwdError = false;
          }, 1000);
          return;
        }
      },
      getTime() {
        let time = new Date()
        let year = time.getFullYear()
        let month = time.getMonth() + 1
        let date = time.getDate()
        let hour = time.getHours()
        let minute = time.getMinutes()
        let second = time.getSeconds()
        //个位补0
        minute < 10 ? minute = '0' + minute : minute
        second < 10 ? second = '0' + second : second
        // this.date = year +
        this.date = year + '/' + month + '/' + date
        this.time = hour + ':' + minute
        //判断时间段
        if (hour <= 10) {
          this.timeText = '上午'
        } else if (hour > 10 && hour < 14) {
          this.timeText = '中午'
        } else if (hour >= 14 && hour <= 24) {
          this.timeText = '下午'
        }
        //判断星期
        let day = time.getDay();
        let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
        this.weekText = weekDay[day]
      }
    },
    components: {},
  };
</script>

<style lang="scss">
  .lock-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
    .lock-form {
      width: 300px;
      .userinfo-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        .username {
          margin: 20px 0 20px;
          color: #fff;
        }
      }
    }
    .date-content {
      position: absolute;
      left: 50%;
      bottom: 50px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ffffff;
      margin-top: 50px;
      .time {
        font-size: 50px;
        .timeText {
          font-size: 35px;
        }
      }
      .date {
        font-size: 25px;
      }
    }

  }

  .lock-container::before {
    z-index: -999;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/img/bg4.jpg");
    background-size: cover;
  }

</style>
